<template>
    <page-wrap scrollType="bs">
      <template v-slot:RollingTop>
        <div class="turnover-container-select">
          <div  v-for="(tab, index) in tabsList" 
        :key="index" 
        class="select-item" 
        @click="currentIndexChange(index)"
        :class="{ active: currentIndex === index }"
      >
        {{ tab.title }}
          </div>
          <div class="select-item select-dateTime" @click="showPicker= true">
               {{ fieldValue }}
          </div>
        </div>
            <van-popup v-model:show="showPicker" round position="bottom">
              <van-picker
              title="选择时间"
                :columns="columns"
                @cancel="showPicker = false"
                @confirm="onConfirm"
              />
            </van-popup>
    </template>
      <template v-slot:extension>
       
    </template>
      <div class="turnover-container">
       
        <div class="turnover-container-all">
          <div class="all-item">
            <div class="all-item-upper">{{ allInfo.num1 }}</div>
            <div class="all-item-below">当日商品营业额</div>
            <div class="all-item-line"></div>
          </div>
          <div class="all-item">
            <div class="all-item-upper">{{ allInfo.num2 }}</div>
            <div class="all-item-below">当月累计商品营业额</div>
          </div>
        </div>
        <div class="turnover-container-main">
          <div class="statistics-container-busDetails">
            <div class="busDetails-title">餐饮类</div>
            <div class="busDetails-main">
              <div class="busDetails-main-proPoint">
                <div class="proPoint-header">
                  <div class="proPoint-header-left">
                    <div class="header-left-title">当日商品营业额</div>
                  </div>
                  <div class="proPoint-header-right">
                    <span class="header-right-title"></span
                    ><span class="header-right-value">{{ RestaurantList.todaySalePrice }}</span>
                  </div>
                </div>
                <div class="proPoint-center">
                  <div class="proPoint-center-left">商品名称</div>
                  <div class="proPoint-center-center">数量</div>
                  <div class="proPoint-center-right">金额</div>
                </div>
                <div class="proPoint-footer">
                  <div class="proPoint-footer-item" v-for="item in RestaurantList.todayRestaurantList" :key="index" >
                    <div class="footer-item-left">{{item.Name}}</div>
                    <div class="footer-item-center">{{ item.SaleCount }}</div>
                    <div class="footer-item-right">
                      {{ item.SalePrice }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="busDetails-main-proPoint">
                <div class="proPoint-header">
                  <div class="proPoint-header-left">
                    <div class="header-left-title">当月商品营业额</div>
                  </div>
                  <div class="proPoint-header-right">
                    <span class="header-right-title"></span
                    ><span class="header-right-value">{{RestaurantList.monthSalePrice }}</span>
                  </div>
                </div>
                <div class="proPoint-center">
                  <div class="proPoint-center-left">商品名称</div>
                  <div class="proPoint-center-center">数量</div>
                  <div class="proPoint-center-right">金额</div>
                </div>
                <div class="proPoint-footer">
                  <div class="proPoint-footer-item" v-for="item in RestaurantList.monthRestaurantList" :key="index">
                    <div class="footer-item-left">{{item.Name}}</div>
                    <div class="footer-item-center">{{ item.SaleCount }}</div>
                    <div class="footer-item-right">
                      {{ item.SalePrice }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="statistics-container-busDetails">
            <div class="busDetails-title">酒水类</div>
            <div class="busDetails-main">
              <div class="busDetails-main-proPoint">
                <div class="proPoint-header">
                  <div class="proPoint-header-left">
                    <div class="header-left-title">当日商品营业额</div>
                  </div>
                  <div class="proPoint-header-right">
                    <span class="header-right-title"></span
                    ><span class="header-right-value">{{ BeverageList.todaySalePrice }}</span>
                  </div>
                </div>
                <div class="proPoint-center">
                  <div class="proPoint-center-left">商品名称</div>
                  <div class="proPoint-center-center">数量</div>
                  <div class="proPoint-center-right">金额</div>
                </div>
                <div class="proPoint-footer">
                  <div class="proPoint-footer-item" v-for="item in BeverageList.todayBeverageList" :key="index">
                    <div class="footer-item-left">{{item.Name}}</div>
                    <div class="footer-item-center">{{ item.SaleCount }}</div>
                    <div class="footer-item-right">
                      {{ item.SalePrice }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="busDetails-main-proPoint">
                <div class="proPoint-header">
                  <div class="proPoint-header-left">
                    <div class="header-left-title">当月商品营业额</div>
                  </div>
                  <div class="proPoint-header-right">
                    <span class="header-right-title"></span
                    ><span class="header-right-value">{{ BeverageList.monthSalePrice  }}</span>
                  </div>
                </div>
                <div class="proPoint-center">
                  <div class="proPoint-center-left">商品名称</div>
                  <div class="proPoint-center-center">数量</div>
                  <div class="proPoint-center-right">金额</div>
                </div>
                <div class="proPoint-footer">
                  <div class="proPoint-footer-item" v-for="item in BeverageList.monthBeverageList" :key="index">
                    <div class="footer-item-left">{{item.Name}}</div>
                    <div class="footer-item-center">{{ item.SaleCount }}</div>
                    <div class="footer-item-right">
                      {{ item.SalePrice }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="statistics-container-busDetails">
            <div class="busDetails-title">其他类</div>
            <div class="busDetails-main">
              <div class="busDetails-main-proPoint">
                <div class="proPoint-header">
                  <div class="proPoint-header-left">
                    <div class="header-left-title">当日商品营业额</div>
                  </div>
                  <div class="proPoint-header-right">
                    <span class="header-right-title"></span
                    ><span class="header-right-value">{{ OtherList.todaySalePrice }}</span>
                  </div>
                </div>
                <div class="proPoint-center">
                  <div class="proPoint-center-left">商品名称</div>
                  <div class="proPoint-center-center">数量</div>
                  <div class="proPoint-center-right">金额</div>
                </div>
                <div class="proPoint-footer">
                  <div class="proPoint-footer-item" v-for="item in OtherList.todayOtherList" :key="index">
                    <div class="footer-item-left">{{item.Name}}</div>
                    <div class="footer-item-center">{{ item.SaleCount }}</div>
                    <div class="footer-item-right">
                      {{ item.SalePrice }}
                    </div>
                  </div>
                </div>
              </div>
              <div class="busDetails-main-proPoint">
                <div class="proPoint-header">
                  <div class="proPoint-header-left">
                    <div class="header-left-title">当月商品营业额</div>
                  </div>
                  <div class="proPoint-header-right">
                    <span class="header-right-title"></span
                    ><span class="header-right-value">{{OtherList.monthSalePrice }}</span>
                  </div>
                </div>
                <div class="proPoint-center">
                  <div class="proPoint-center-left">商品名称</div>
                  <div class="proPoint-center-center">数量</div>
                  <div class="proPoint-center-right">金额</div>
                </div>
                <div class="proPoint-footer">
                  <div class="proPoint-footer-item" v-for="item in OtherList.monthOtherList" :key="index">
                    <div class="footer-item-left">{{item.Name}}</div>
                    <div class="footer-item-center">{{ item.SaleCount }}</div>
                    <div class="footer-item-right">
                      {{ item.SalePrice }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </page-wrap>
  </template>
  
  <script setup>
  import Api from '@/api'
  import dayjs from 'dayjs'
  // 默认高亮显示
  const currentIndex = ref(0)
  // 模拟数据
  const allInfo = reactive({
    num1: '',
    num2: ''
  })

const tabsList = ref([
   {title:'全部'},
   {title:'单品'},
   {title:'套餐'}
])

   let columns = [];
   let currentDate = new Date(2024, 0, 1); // 注意月份是从0开始的，所以0代表1月

for (let i = 0; i < 12; i++) {
  // 使用 padStart 方法确保月份和日期始终为两位数
  let year = currentDate.getFullYear();
  let month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
  let day = currentDate.getDate().toString().padStart(2, '0');

  // 构建日期字符串
  let dateString = `${year}-${month}-${day}`;

  // 将新格式的日期添加到数组中
  columns.push({ text: dateString, value: dateString });

  // 移动到下一个月的第一天
  currentDate.setMonth(currentDate.getMonth() + 1);
}

console.log(columns,'-------')

    const fieldValue = ref('自定义');
    const showPicker = ref(false);
    const onConfirm = ({ selectedOptions }) => {
      showPicker.value = false;
      fieldValue.value = selectedOptions[0].text;
      postForm.statisticsDate = selectedOptions[0].text;
      loadData(true)
    };

// 表单
const postForm = {
  statisticsDate: dayjs().startOf('day').format('YYYY-MM-DD'),
  ItemType: '' //商品类型1.单品,3.套餐
}

const currentIndexChange = (value) => {
  console.log(value)
  if(value == 1) {
    postForm.ItemType = 1
  } else if(value == 2) {
    postForm.ItemType = 3
  } else {
    postForm.ItemType = ''
  }
  
  currentIndex.value = value
  
  loadData(true)
}
const RestaurantList = ref([])
const BeverageList = ref([])
const OtherList = ref([])
  const loadData = async function (refresh = false) {
  //获取营业额统计
    await Api.Common.AppObjProcess.Do({
        functionName: 'GetGoodsStatistics',
        contentData: postForm
      }).then(res => {
         console.log(res,'GetGoodsStatistics--------------')
         allInfo.num1 = res.todayPrice
         allInfo.num2 = res.monthPrice
         RestaurantList.value = res.Restaurant
         BeverageList.value = res.Beverage
         OtherList.value = res.Other

      })
}

    // 初始化
    const onInit = () => {
      loadData(true)
    }
    onInit()


  </script>
  
  <style scoped lang="scss">
  @import '@/styles/l.scss';
  .turnover-container-select {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 12px;
      background: #222226;
      margin-top: 10px;
      .select-item {
        padding: 8px 22px;
        border: 1px solid #999999;
        border-radius: 4px;
        line-height: 14px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #cccccc;
        &.active {
          background: #ffaa00;
          border-radius: 4px;
          line-height: 14px;
          font-size: 14px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #ffffff;
        }
      }
      .select-dateTime {
        display: flex;
        justify-content: center;
        padding: 8px 0 ;
        width: 100px;
      }
    }
  .turnover-container {
    
    .turnover-container-all {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #28282e80;
      box-shadow: inset 0 0 20px rgba(63, 61, 66, 0.5);
      border-radius: 8px;
      padding: 20px 0;
      margin: 10px 12px;
      .all-item {
        flex-basis: 50%;
        text-align: center;
        position: relative;
        .all-item-upper {
          line-height: 22px;
          font-size: 22px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
          padding-bottom: 12px;
        }
        .all-item-below {
          line-height: 12px;
          font-size: 12px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #cccccc;
        }
        .all-item-line {
          position: absolute;
          width: 1px;
          height: 40px;
          right: 0px;
          top: 0px;
          background-image: url('@/assets/images/common/i_onwine-line.png');
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        }
      }
    }
    .turnover-container-main {
      padding: 0px 12px 50px;
      .statistics-container-busDetails {
        .busDetails-title {
          font-size: 18px;
          font-family: PingFang SC;
          font-weight: bold;
          color: #ffffff;
          line-height: 18px;
          padding: 20px 0;
        }
        .busDetails-main {
          .busDetails-main-sales {
            background: #28282e;
            border-radius: 8px;
            padding: 18px 0 20px;
            margin-bottom: 10px;
            .busDetails-sales-upper {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 12px 17px;
              border-bottom: 1px solid #383840;
              .sales-upper-left {
                .upper-left-title {
                  font-size: 16px;
                  font-family: PingFang SC;
                  font-weight: bold;
                  color: #ffffff;
                  line-height: 16px;
                }
              }
              .sales-upper-right {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
  
                line-height: 14px;
                .upper-right-title {
                  color: #999999;
                }
                .upper-right-value {
                  color: #ffaa00;
                }
              }
            }
            .busDetails-sales-below {
              padding-top: 20px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .sales-below-item {
                flex-basis: 33.33%;
                text-align: center;
                position: relative;
                .sales-below-value {
                  line-height: 14px;
                  font-size: 14px;
                  font-family: PingFang SC;
                  font-weight: bold;
                  color: #fefefe;
                  padding-bottom: 12px;
                }
                .sales-below-title {
                  line-height: 12px;
                  font-size: 12px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #cccccc;
                }
                .sales-below-line {
                  position: absolute;
                  width: 1px;
                  height: 40px;
                  right: 0px;
                  top: 0px;
                  background-image: url('@/assets/images/common/i_onwine-line.png');
                  background-repeat: no-repeat;
                  background-position: center center;
                  background-size: cover;
                }
              }
            }
          }
       
  
          .busDetails-main-other {
            background: #28282e;
            border-radius: 8px;
            padding: 18px 0 0px;
            margin-bottom: 10px;
            .busDetails-other-upper {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 12px 17px;
              border-bottom: 1px solid #383840;
              .other-upper-left {
                .upper-left-title {
                  font-size: 16px;
                  font-family: PingFang SC;
                  font-weight: bold;
                  color: #ffffff;
                  line-height: 16px;
                }
              }
            }
            .busDetails-other-below {
              padding: 12px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              .other-below-item {
                flex-basis: calc(50% - 5px);
                padding: 16px 12px 16px 10px;
                background: #222226;
                border-radius: 8px;
                .below-item-upper {
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  padding-bottom: 23px;
                  .item-upper-left {
                    padding-left: 2px;
                    line-height: 14px;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: bold;
                    color: #fefefe;
                  }
                  .item-upper-right {
                    line-height: 14px;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #cccccc;
                  }
                }
                .below-item-below {
                  .item-below-title {
                    line-height: 14px;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #cccccc;
                  }
                }
              }
            }
          }
        }
      }
    }
    .proPoint-footer-item:nth-last-child(1) {
       border-bottom: none;
    }

  }
.van-picker {
    background-color: #45454D;
    :deep(.van-picker-column__item) {
        color: #FFFFFF;
    }
    :deep(.van-picker-column__item--selected) {
        color: #FFAA00;
    }
    :deep(.van-picker__mask) {
        background: transparent;
    }
    :deep(.van-hairline-unset--top-bottom) {

        &:after {
            border-color: #505059;
        }
    }
    :deep(.van-picker__confirm) {
        font-size: 16px;
        color: #FFAA00;
        padding: 0 30px;
    }
    :deep(.van-picker__cancel) {
        font-size: 16px;
        color: #999999;
        padding: 0 30px;
    }
    :deep(.van-picker__title) {
        font-size: 18px;
        color: #FFFFFF;
    }
    :deep(.van-picker) {
        background-color: transparent;
    }
    :deep(.van-tabs__nav) {
        background-color: transparent;
    }
    :deep(.van-tab) {
        color: #CCCCCC;
        &.van-tab--active {
            color: #FFAA00;
        }
    }
    :deep(.van-tabs__line) {
        background-color: #FFAA00;
    }
    :deep(.van-picker__toolbar) {
        border-bottom: 1px solid #505059;
    }
    :deep(.van-picker-group__tab-title) {
        margin-right: 0;
    }
}
  </style>
  